<?php
/**
 * @author MESMERiZE
 * @copyright 2011
 */
$JO_IE = false;
$JO_GC = false;
$JO_FF = false;
if(			strpos( $_SERVER[ "HTTP_USER_AGENT" ], "MSIE"			) !== false ) $JO_IE = true;
else if(	strpos( $_SERVER[ "HTTP_USER_AGENT" ], "Google Chrome"	) !== false ) $JO_GC = true;
else if(	strpos( $_SERVER[ "HTTP_USER_AGENT" ], "Firefox"		) !== false ) $JO_FF = true;
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery/JS.js"></script>
<script type="text/javascript" src="../jquery/ajax.js"></script>
<script type="text/javascript" src="../jquery/jquery.history.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="../jquery/droparea.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery/jquery-ui-1.7.1.custom.min.js"></script>
<!--css drag-drap-->
<link rel="stylesheet" type="text/css" href="../Styles/css_list_sortable.css"/>
<link rel="stylesheet" type="text/css" href="../Styles/css3_element.css"/>
<!--end css drag-drap-->
<link  rel="stylesheet" type="text/css" href="../Styles/CSS.css"/>
<?php if ($JO_IE == false) {?>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.droparea').droparea({
					    'post' : 'upload.php',
					    'init' : function(r){
				//console.log('my init',r);
			},
					    'start' : function(r){
			//console.log('my start',r);
			},
					    'error' : function(r){
			//console.log('my error',r);
			},
					    'complete' : function(r){
			//console.log('my complete',r);
			}
			});
		});
	</script>
	<?php }?>
	<script type="text/javascript">
	$(document).ready(function(){
		$(function() {
			item_add();
			item_delete();
			item_up();
			item_down();
			function item_add(){
				$(".item_add").click(
					function(){
						var o_li = $(this).parent().parent();
						$("#lst_playlist").append(o_li);
					}
				);
			}
			function item_up() {
				$(".item_up").click(
					function(){
						var o_item_current 	= $(this).parent().parent();
						if(o_item_current.prev().attr("id")==null){
							alert("Top of the world");
							return;
						}
						o_item_current.insertBefore(o_item_current.prev());
					}
				);
			}
			function item_down() {
				$(".item_down").click(
					function(){
						var o_item_current 	= $(this).parent().parent();
						if(o_item_current.next().attr("id")==null){
							alert("Bottom of the society");
							return;
						}
						o_item_current.insertAfter(o_item_current.next());
					}
				);
			}
			function item_delete(){
				$(".item_delete").click(
					function(){
						var o_li = $(this).parent().parent();
						$("#lst_music").append(o_li);
					}
				);
			}
			$("#lst_playlist").sortable({
				opacity		: 0.6,
				cursor		: 'move',
				connectWith	: ".connectedSortable"
			}).disableSelection();
			$("#lst_music").sortable({
				opacity		: 0.6,
				cursor		: 'move',
				connectWith	: ".connectedSortable",
				cancel		: ".ui-state-disabled",//Cancel sorting (but keep as drop targets):
				update		: function () {
				}
			}).disableSelection();
		});
	});
</script>
<table width="100%">
    <tr>
        <th  style="">Organization</th>
        <td class="td_1">
            <select style="width: 20%;text-align: center;">
                <option>IMT</option>
                <option>BST</option>
                <option>AST</option>
                <option>EPT</option>
                <option>IPT</option>
            </select>
            <input type="button" value="Add"/>
        </td>
    </tr>
    <tr>
        <th align="center">List member of team</th>
        <th align="center">List member of company</th>
    </tr>
     <tr>
        <td >
            <div class="list_sortable" style="margin-left: 20%;margin-top: 8px;">
    			<ul id="lst_playlist" class="main_list connectedSortable" >
    				<li id="arr_music_1" style="width: 80%;">
    					<p class="item_contain">
    						Nguyễn Hoàng Quân<br/>
   						</p>
    					<p class="sub_button_navigtion">
    						<a class="item_add" href="javascript:void(0);">+</a>
    					</p>
    					<p class="main_button_navigtion">
    						<a class="item_up"		href="javascript:void(0);">&uarr;</a>
    						<a class="item_down" 	href="javascript:void(0);">&darr;</a>
    						<a class="item_delete"	href="javascript:void(0);">x</a>
    					</p>
    				</li>
                    <li id="arr_music_1" style="width: 80%;">
    					<p class="item_contain">
    						Nguyễn Minh Tuấn<br/>
   						</p>
    					<p class="sub_button_navigtion">
    						<a class="item_add" href="javascript:void(0);">+</a>
    					</p>
    					<p class="main_button_navigtion">
    						<a class="item_up"		href="javascript:void(0);">&uarr;</a>
    						<a class="item_down" 	href="javascript:void(0);">&darr;</a>
    						<a class="item_delete"	href="javascript:void(0);">x</a>
    					</p>
    				</li>
                    
    			</ul>
            </div>
       </td>
       <td >
            <div class="list_sortable" style="margin-left: 20%;margin-top: 8px;">
    			<ul id="lst_music" class="sub_list" >
    				<li id="arr_music_6" style="width: 80%;">
    					<p style="margin: 0px;">Khương Xuân Trường</p>
    					<p class="sub_button_navigtion">
    						<a class="item_add" href="javascript:void(0);">+</a>
    					</p>
    					<p class="main_button_navigtion">
    						<a class="item_up"		href="javascript:void(0);">&uarr;</a>
    						<a class="item_down" 	href="javascript:void(0);">&darr;</a>
    						<a class="item_delete"	href="javascript:void(0);">x</a>
    					</p>
    				</li>
    				
    			</ul>
          </div>
    </td >
  </tr>
  <tr>
    <th colspan="2">Quyền Hạn</th>
  </tr>
  <tr style="text-align: center;">
    <td><input type="checkbox"/> abc</td>
    <td><input type="checkbox"/> bcd</td>
  </tr>
  <tr>
      <td colspan="2" align="center">
        <input type="button" value="Save"/>
        <input type="button" value="Cancel"/>
        </td>
  </tr>
</table>